<template>
    <div>
        <div class="orderDetail-list">
            <el-row :gutter="12">
                <el-col :span="8" v-for="(item, index) of orderDetail" :key="index">
                    <div class="orderDetail-item" style="position: relative;">
                        <!-- <div v-if="item.remainder" class="earlyWarning">
                            <div class="warningContent">
                                <img src="@/assets/image/warning.png" alt="">
                                <div class="warningText"><span>{{ item.remainder }}</span></div>
                                <el-button type="primary" size="mini" @click="knowWarning(item)">确定</el-button>
                            </div>
                        </div> -->
                        <div class="item-head-info">
                            <div class="head-info-left">
                                <div class="info-left-img">
                                    <img src="@/assets/image/file_item.png" alt="">
                                </div>
                            </div>
                            <div class="head-info-right">
                                <div class="info-right-text">
                                    <div>提单号: <span style="margin-right: 8px;">{{ ruleForms.bill_lading_number }}</span>

                                    </div>
                                    <div>
                                        <span v-if="item.spell_cabinet">{{
                                            item.spell_cabinet
                                            }}</span>
                                    </div>
                                </div>
                                <div class="info-right-tag">
                                    <div class="right-tag-style">{{ item.spec }}</div>
                                    <div class="right-tag-style changeBg">{{ ruleForms.business_type }}</div>
                                    <div class="right-tag-style changeBg">{{ item.weight }}吨</div>
                                </div>
                            </div>
                            <div class="item-head-info-type">待发布</div>
                        </div>
                        <div class="item-content-info">
                            <div class="content-address-list">
                                <div class="content-address-item">
                                    <div class="address-item-left">
                                        <div v-if="item.status <= 20" class="suitcase">
                                            提箱
                                        </div>
                                        <div v-else class="suitcase suitcase_tow">
                                            提箱
                                        </div>
                                        <div class="little">
                                        </div>
                                        <div v-if="factoryInfos.length == 1" class="dashed_line">
                                        </div>
                                        <div v-if="factoryInfos.length > 1" class="dashed_line_two"></div>

                                    </div>
                                    <div class="address-item-right">
                                        <div class="item-right-left">
                                            <div>{{ ruleForms.port }}</div>
                                            <div class="address-station">{{ ruleForms.station_name }}</div>
                                            <div class="address-station address-station_two">截单时间：{{
                                                ruleForms.cut_off_time
                                                || '-- --' }}
                                            </div>
                                            <div class="address-station address-station_two">截港时间：{{
                                                ruleForms.cut_off_port_time || '-- --'
                                                }}</div>
                                        </div>
                                        <div class="item-right-button">

                                        </div>
                                    </div>
                                </div>

                                <div class="content-address-item" v-for="(factoryInfo, index) of factoryInfos"
                                    :key="index">
                                    <div class="address-item-left">
                                        <div class="img_box">
                                            <img src="../../../assets/image/plant_bg.svg"
                                                style="width: 24px;height: 20px;" alt="">
                                            <span v-if="factoryInfos.length > 1" class="plant_num">{{ index + 1
                                            }}厂</span>
                                            <span v-if="factoryInfos.length == 1" class="plant_num_two">工厂</span>
                                        </div>
                                        <div class="little little_two">
                                        </div>
                                        <div v-if="factoryInfos.length == 1" class="dashed_line"></div>
                                        <div v-if="factoryInfos.length > 1" class="dashed_line_two"></div>
                                    </div>
                                    <div class="address-item-right">
                                        <div class="item-right-left">
                                            <div>{{ factoryInfo.street }}</div>
                                            <!-- <div class="address-station">{{ factoryInfo.city }}</div> -->
                                            <div class="address-station">{{ factoryInfo.load_and_unload_address }}</div>
                                            <div class="address-station address-station_two"
                                                v-if="ruleForms.business_type == '进口'">卸货时间：{{
                                                    factoryInfo.load_and_unload_time }}</div>
                                            <div class="address-station address-station_two"
                                                v-if="ruleForms.business_type == '出口'">装货时间：{{
                                                    factoryInfo.load_and_unload_time }}</div>

                                        </div>
                                        <div class="item-right-button">

                                        </div>
                                    </div>
                                </div>
                                <div class="content-address-item">
                                    <div class="address-item-left">
                                        <div class="suitcase">
                                            落箱
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="line"></div>
                            <div>
                                <div class="orderDetail-price">
                                    <div class="orderDetail-price-info">
                                        <div @click="setDialog(item, '当前货主运费', index)" style="cursor: pointer;">
                                            货主运费: <span style="color: rgb(245, 63, 63); font-weight: 500;">￥{{
                                                item.amount || '-- --'
                                            }}</span><i class="el-icon-edit-outline" v-if="item.status < 50"
                                                style="margin-left: 6px; color: rgb(78, 89, 105);"></i>
                                        </div>
                                        <div v-if="item.settlement_amount" @click="setDialog(item, '当前接单运费', index)"
                                            style="cursor: pointer;">
                                            <span v-if="item.settlement_method == 1">月结</span>
                                            <span v-if="item.settlement_method == 2">现结</span>运费: <span
                                                style="color: rgb(245, 63, 63); font-weight: 500;">￥{{
                                                    item.settlement_amount || '-- --'
                                                }}</span><i class="el-icon-edit-outline"
                                                style="margin-left: 6px; color: rgb(78, 89, 105);"></i>
                                        </div>
                                        <div v-if="item.settlement_method">
                                            结算方式: <span v-if="item.settlement_method == 1"
                                                style="color: rgb(245, 63, 63); font-weight: 500;">月结</span>
                                            <span v-if="item.settlement_method == 2"
                                                style="color: rgb(245, 63, 63); font-weight: 500;">现结</span>
                                        </div>

                                    </div>
                                    <!-- <div class="orderDetail-price-button">
                                        <el-button type="primary" size="mini" v-if="item.status == 10"
                                            @click="setDialog(item)">修改运费</el-button>
                                    </div> -->
                                </div>
                            </div>
                            <div class="userInfo" style="height: 86px;">
                                <div style="display: flex; align-items: center; justify-content: space-around;"
                                    v-if="item.phone == ''">
                                    <!-- <div class="user-null_top">
                                        <img src="@/assets/image/taskfooter_img.png" alt="">
                                        <span>暂无接单人</span>
                                    </div> -->
                                    <div class="">
                                        <el-button size="mini" type="primary"
                                            @click="addUser(item, index, 1)">添加接单人</el-button>
                                    </div>
                                </div>
                                <div class="user-null" v-else>
                                    <div class="dirve-info">
                                        <img src="@/assets/image/driver_head.png" style="width: 40px;height: 40px;"
                                            alt="">
                                        <div class="dirve-info-phone">
                                            <div class="info-phone-name">{{ item.real_name }}·{{ item.phone }}</div>
                                            <!-- <div class="info-phone-car">{{ item.car_number }}</div> -->
                                        </div>
                                    </div>
                                    <div class="">
                                        <el-button size="mini" type="primary"
                                            @click="addUser(item, index, 2)">修改接单人</el-button>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <!-- 添加接单人  @open="clearValidation"-->
        <el-dialog :z-index="2002" :title="titles" :visible.sync="dialogFormUser" :close-on-click-modal="false"
            @close="$refs.formUser.resetFields()" class="custom-dialog">
            <div>
                <el-form :model="formUser" :rules="rulesTwo" ref="formUser">

                    <el-form-item label="接单人" prop="combinedId" :label-width="formLabelWidthTwo">
                        <el-select class="selectStyle" size="mini" ref="pfidRef" v-model="formUser.combinedId"
                            filterable remote clearable placeholder="请选择接单人" :remote-method="remoteMethod"
                            @clear="handleClear" :loading="loadingss">
                            <el-option v-for="item in addUserInfo" :key="`${item.pfid}-${item.user_type}`"
                                :label="item.name" :value="`${item.pfid},${item.user_type}`"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="结算方式" prop="settlement_amount" :label-width="formLabelWidthTwo">
                        <el-radio @change="optionType" v-model="formUser.settlement_amount" label="2">现结</el-radio>
                        <el-radio @change="optionType" v-model="formUser.settlement_amount" :disabled="isDisabled"
                            label="1">月结</el-radio>
                    </el-form-item>
                    <el-form-item label="运费" prop="amount" :label-width="formLabelWidthTwo">
                        <el-input style="width: 185px;" maxlength="10" @input="filterAmount(2)"
                            v-model="formUser.amount" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer" style="padding-bottom: 20px; margin-right: 20px;">
                <el-button @click="dialogFormUser = false">取 消</el-button>
                <el-button type="primary" @click="submitForm('formUser')">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 修改价格 -->
        <el-dialog :z-index="2002" title="修改运费" :visible.sync="dialogFormVisible" :close-on-click-modal="false"
            @close="$refs.form.resetFields()" width="25%">
            <div style="margin-bottom: 20px;font-size: 12px;">
                {{ oldPriceName }}：<span
                    style="color: rgb(245, 63, 63);font-family: PingFang SC;font-size: 13px;font-weight: 500;">￥{{
                        oldPrice }}</span>
            </div>
            <el-form :model="form" :rules="rules" ref="form">
                <el-form-item label="新运费" prop="price" :label-width="formLabelWidth">
                    <el-input @input="filterAmount(1)" maxlength="10" v-model="form.price"
                        autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" style="padding-bottom: 20px; margin-right: 20px;">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="affirmSet('form')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { carrierList, orderStatus, taskDetail, setFreight, getNowPrice } from '@/api/api'
export default {
    props: {
        assign_list: {
            type: Array,
            required: true, // 指定该 prop 是必需的
        },
        factoryInfo: {
            type: Array,
        },
        ruleForm: {
            type: Object,
        },
    },
    data () {
        return {
            loading: false,
            loadingss: false,
            dialogFormUser: false,
            dialogFormVisible: false,
            titles: '',
            orderDetail: [],
            factoryInfos: [],
            ruleForms: {},
            // 接单人
            addUserInfo: [],
            // 当前下表
            currentIndex: '',
            // 是否禁用
            isDisabled: false,
            formUser: {
                pfid: '',
                settlement_amount: '1',
                amount: '',
                combinedId: null,
                // index: '',
            },
            rulesTwo: {
                combinedId: [
                    { required: true, message: '请选择接单人', trigger: 'change' },
                ],
                settlement_amount: [
                    { required: true, message: '请选择结算方式', trigger: 'change' },
                ],
                amount: [
                    { required: true, message: '请输入运费', trigger: 'blur' },
                ],

            },
            oldPrice: '',
            oldPriceName: '',
            form: {
                price: ''
            },
            rules: {
                price: [
                    { required: true, message: '请输入运费价格', trigger: 'blur' },
                ]
            },
            // 修改运费下表
            setPriceIndex: '',
            formLabelWidth: '70px',
            formLabelWidthTwo: '80px',
            childData: [],
        }
    },
    methods: {
        // 修改价格
        setDialog (item, value, index) {
            this.setPriceIndex = index
            this.$set(this.form, 'price', '')
            this.dialogFormVisible = true
            if (value == '当前货主运费') {
                this.oldPrice = item.amount
            } else {
                this.oldPrice = item.settlement_amount
            }
            this.oldPriceName = value
        },
        // 确定修改价格
        affirmSet (formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (this.oldPriceName == '当前货主运费') {
                        this.orderDetail[this.setPriceIndex].amount = this.form.price
                        this.dialogFormVisible = false
                    } else {
                        this.orderDetail[this.setPriceIndex].settlement_amount = this.form.price
                        this.dialogFormVisible = false
                    }

                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        // 过滤输入的方法
        filterWeightInput (inputValue) {
            // 如果第一位是小数点，移除小数点
            if (inputValue.startsWith('.')) {
                return inputValue.slice(1); // 移除小数点
            }

            // 使用正则表达式过滤非数字字符
            let numericValue = inputValue.replace(/[^0-9.]/g, '');
            // 允许一个小数点
            const parts = numericValue.split('.');
            if (parts.length > 2) {
                // 如果有多个小数点，只保留第一个
                numericValue = parts[0] + '.' + parts.slice(1).join('').replace(/\./g, '');
            }

            return numericValue;
        },
        // 过滤推荐价格
        filterAmount (type) {
            let inputValue = ""
            if (type == 2) {
                inputValue = this.formUser.amount
            } else {
                inputValue = this.form.price
            }

            //   console.log('我是输入的价格', inputValue);

            // 过滤输入值
            // const filteredValue = this.filterWeightInput(inputValue);
            // let numericValue = parseFloat(filteredValue);
            // 四舍五入到最接近的10
            // const roundedValue = Math.round(filteredValue / 10) * 10;
            let roundedValue = inputValue.replace(/[^0-9]/g, '');
            if (roundedValue == 0 || isNaN(roundedValue)) {
                if (type == 2) {
                    this.formUser.amount = '';
                } else {
                    this.form.price = ''
                }

            } else {
                if (type == 2) {
                    this.formUser.amount = roundedValue
                } else {
                    this.form.price = roundedValue
                }

            }
            //   this.form.price = roundedValue;

        },
        // 添加接单人方法
        async addUser (item, index, type) {
            if (type == 1) {
                this.titles = '添加接单人'
            } else {
                this.titles = '修改接单人'
            }
            this.currentIndex = index;
            this.itemUser = item;
            if (item.amount > 0) {
                this.formUser.amount = item.settlement_amount
            } else {
                this.formUser.amount = ''
            }
            if (item.settlement_method && item.pfid > 0) {
                this.formUser.settlement_amount = item.settlement_method
                this.formUser.pfid = item.pfid
                this.formUser.combinedId = `${item.pfid},${item.user_type}`
            }

            if (item.payment_method == 2) {
                this.formUser.settlement_amount = '2'
                this.isDisabled = true
            } else {
                // this.formUser.settlement_amount = '1'
                this.isDisabled = false
            }
            try {
                const formData = new FormData()
                formData.append('real_name', item.real_name)
                const res = await carrierList(formData);
                if (res.status === 200) {
                    this.addUserInfo = res.data;
                    this.dialogFormUser = true;

                }
            } catch (error) {
                console.error('加载接单人失败:', error);
            }
        },
        // 模糊搜索接单人
        remoteMethod (query) {
            this.loadingss = true;
            const formData = new FormData();
            if (query) {
                formData.append('real_name', query); // 动态添加搜索参数
            }
            carrierList(formData)
                .then(res => {
                    if (res.status === 200) {
                        this.addUserInfo = res.data; // 更新列表数据
                    }
                    this.loadingss = false;
                })
                .catch(err => {
                    this.loadingss = false;
                });
        },
        // 清空搜索框时触发
        handleClear () {
            this.loadInitialData(); // 重新加载初始数据
        },
        // 切换结算方式
        optionType () {
            const formData = new FormData()
            formData.append('amount', this.itemUser.amount)
            formData.append('settlement_method', this.formUser.settlement_amount)
            formData.append('tax_ratio', this.orderDetail[this.currentIndex].tax_ratio)
            getNowPrice(formData).then(res => {
                if (res.status == 200) {
                    this.formUser.amount = res.data.settlement_amount
                }
            })
        },
        // 接单人
        optionName (index) {
            this.addUserInfo.some(item => {
                if (item.index === index) {
                    this.formUser.pfid = item.pfid
                    console.log('this.formUser.pfid', this.formUser.pfid);

                    return true
                }
                return false
            })
        },

        // 加载初始数据
        async loadInitialData () {
            try {
                const res = await carrierList(); // 不传参数，获取初始数据
                if (res.status === 200) {
                    this.addUserInfo = res.data; // 更新列表数据
                }
            } catch (error) {
                console.error('加载初始数据失败:', error);
            }
        },
        // 确定指派
        submitForm (formName) {
            let flag = false

            this.$refs[formName].validate((valid) => {
                if (valid) {
                    flag = true
                } else {
                    this.loading = false
                    console.log('error submit!!');
                    return false;

                }
            });
            if (flag) {
                this.dialogFormUser = false
                // console.log(this.formUser.combinedId, '信息');

                const [selectedPfid, selectedUserType] = this.formUser.combinedId.split(',');
                this.addUserInfo.some(item => {
                    if (item.pfid == selectedPfid && item.user_type == selectedUserType) {
                        this.orderDetail[this.currentIndex].real_name = item.real_name
                        this.orderDetail[this.currentIndex].phone = item.phone
                        this.orderDetail[this.currentIndex].pfid = item.pfid
                        this.orderDetail[this.currentIndex].user_type = item.user_type
                        this.orderDetail[this.currentIndex].settlement_method = this.formUser.settlement_amount
                        // this.orderDetail[this.currentIndex].amount = this.formUser.amount
                        this.orderDetail[this.currentIndex].settlement_amount = this.formUser.amount
                        return true
                    }
                    return false
                })

                // console.log('this.orderDetail', this.orderDetail);
                // 触发父组件传递参数
                this.$emit('parentMethods', this.orderDetail)

            }
        },
    },
    watch: {
        assign_list () {
            this.orderDetail = this.assign_list
            this.factoryInfos = this.factoryInfo
            this.factoryInfos.forEach(item => {
                item.street = item.address.split(" ")[1]
            })
            this.ruleForms = this.ruleForm
        }
    },
}
</script>

<style scoped lang="scss">
.orderDetail {
    width: 100%;
    // min-height: calc(100vh - 98px);
    height: 100%;
    // flex: 1;
}

.orderDetail-list {
    width: 100%;
    // display: flex;
    // flex-wrap: wrap;
    // justify-content: start;
}

.orderDetail-item {
    width: 100%;
    background-color: rgb(255, 255, 255);
    border-radius: 8px;
    // margin-right: 12px;
    margin-bottom: 12px;
}

.item-head-info {
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: url(../../../assets/image/orderDetail-bg.png);
    background-size: 100% 100%;
    position: relative;
}

.head-info-left {
    width: 50px;

}

.info-left-img {
    width: 38px;
    height: 38px;
    border-radius: 6px;
    background-color: #fff;
}

.head-info-right {
    flex: 1;
}

.info-right-text {
    color: rgb(78, 89, 105);
    font-size: 10px;
    font-weight: 400;
    display: flex;
    flex-direction: column;
    // align-items: center;
    justify-content: center;

    span {
        color: rgb(29, 33, 41);
        font-weight: 500;
    }
}

.info-right-tag {
    display: flex;
    align-items: center;
    margin-top: 8px;
}

.right-tag-style {
    background-color: rgb(220, 231, 253);
    height: 20px;
    color: rgb(8, 29, 123);
    font-weight: 400;
    font-size: 10px;
    padding: 0 8px;
    margin-right: 8px;
    line-height: 20px;
    text-align: center;
    border-radius: 6px;
}

.changeBg {
    background-color: rgb(255, 255, 255);
    color: rgb(78, 89, 105);
}

.item-head-info-type {
    background-color: rgb(22, 93, 255);
    // width: 52px;
    height: 16px;
    padding: 0 8px;
    border-radius: 0px 8px 0px 15px;
    position: absolute;
    top: 0;
    right: 0;
    line-height: 16px;
    text-align: center;
    color: #fff;
    font-weight: 400;
    font-size: 10px;
}

.head-type-item-yellow {
    background-color: rgb(247, 186, 30);
}

.head-type-item-orange {
    background-color: rgb(255, 125, 0);
}

.head-type-item-gray {
    background-color: rgb(20, 201, 201);
}

.head-type-item-green {
    background-color: rgb(0, 186, 115);
}

.item-content-info {
    padding: 12px 16px;
    background-color: #F2F3F5;
}

.content-address-item {
    display: flex;
    // margin-bottom: 16px;
}

.address-item-left {
    width: 35px;
    // margin-top: -2px;
}

.suitcase {
    background-color: rgb(255, 125, 0);
    width: 24px;
    height: 16px;
    border-radius: 4px;
    color: #fff;
    font-weight: 500;
    font-size: 9px;
    line-height: 16px;
    text-align: center;
}

.address-item-right {
    flex: 1;
    display: flex;
    justify-content: space-between;
    // align-items: center;
}

.item-right-left {
    color: rgb(29, 33, 41);
    font-size: 12px;
    font-weight: 500;
}

.address-station {
    color: rgb(134, 144, 156);
    font-weight: 400;
    font-size: 10px;
    margin-top: 5px;
}

.address-station_two {
    font-size: 10px;
}

.line {
    width: 100%;
    height: 1px;
    background-color: rgb(229, 230, 235);
    margin-bottom: 8px;
}

.attention-tags {
    display: flex;
    align-items: center;
    // margin-bottom: 6px;
    height: 20px;
}

.attention-tags-item {
    cursor: pointer;
    padding: 0 8px;
    height: 20px;
    background-color: rgb(232, 247, 255);
    color: rgb(22, 93, 255);
    border-radius: 4px;
    font-weight: 400;
    font-size: 10px;
    margin-right: 8px;
    line-height: 20px;
    text-align: center;
}

.orderDetail-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 8px;
    height: 50px;
}

.orderDetail-price-info {
    color: rgb(78, 89, 105);
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
}

.user-null {
    text-align: center;
    color: rgb(134, 144, 156);
    font-size: 12px;
    font-weight: 400;
    position: relative;
}

.dirve-info {
    display: flex;
    align-items: center;
}

.dirve-info-phone {
    display: flex;
    height: 48px;

    margin-left: 10px;
    flex-direction: column;
    justify-content: space-around;
    align-items: start;
}

.info-phone-name {
    color: rgb(29, 33, 41);
    font-size: 12px;
    font-weight: 500;
}

.info-phone-car {
    color: rgb(134, 144, 156);
    font-size: 12px;
    font-weight: 400;
}

.driver_position {
    position: absolute;
    bottom: 2px;
    right: 0;
    color: rgb(22, 93, 255);
    font-size: 12px;
    font-weight: 400;
    margin-bottom: 2px;
    cursor: pointer;
}

.driver_cancel {
    position: absolute;
    bottom: 27px;
    right: 0;
    color: rgb(22, 93, 255);
    font-size: 12px;
    font-weight: 400;
    margin-bottom: 2px;
    cursor: pointer;
}

.content-address-list {
    height: 200px;
    display: flex;
    flex-direction: column;
    overflow: auto;
    // justify-content: space-between;
}

.affirm {
    display: flex;
    flex: 1;
    justify-content: end;
    align-items: center;
}

.box_img {
    display: flex;
    justify-content: space-around;
    // flex-wrap: wrap;
    margin-top: 50px;
}

.box_img_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
    padding: 0 10px;
    margin-bottom: 20px;
}

.box_img_item_two {
    display: flex;
    align-items: center;
    width: 50%;
    padding: 0 10px;
    margin-bottom: 20px;
}

// .box_img_item_info {
//     width: 100%;
//     /* 设置容器宽度 */
//     height: 200px;
//     // object-fit: cover;
//     overflow: hidden;
// }

.image {
    // width: 400px;
    // height: auto;
    width: 100%;
    /* 设置容器宽度 */
    height: 200px;
    object-fit: cover;
    object-position: center center;
}

.user-null_top {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: rgb(134, 144, 156);
    font-size: 12px;
    font-weight: 400;
    height: 48px;
    justify-content: space-between;
}

#mapContainer {
    height: 400px;
    /* 设置地图容器的高度 */
}

.little {
    width: 6px;
    height: 6px;
    background: rgb(140, 161, 192);
    border-radius: 50%;
    margin-left: 9px;
    margin-top: 2px;
}

.dashed_line {
    width: 0;
    height: 56px;
    border-left: 2px dashed rgb(140, 161, 192);
    margin-left: 11px;
    margin-top: 3px;
    // margin-bottom: 2px;
}

.solid_line {
    width: 0;
    height: 56px;
    border-left: 2px solid rgb(140, 161, 192);
    margin-left: 11px;
    margin-top: 3px;
}

.solid_line_two {
    width: 0;
    height: 28px;
    border-left: 2px solid rgb(140, 161, 192);
    margin-left: 11px;
    margin-top: 3px;
}

.dashed_line_two {
    width: 0;
    height: 28px;
    border-left: 2px dashed rgb(140, 161, 192);
    margin-left: 11px;
    margin-top: 3px;
}

.little_two {
    margin-top: 0px;
}

.suitcase_tow {
    background: rgb(140, 161, 192);
    color: #fff;
}

.img_box {
    width: 24px;
    height: 24px;
    position: relative;
}

.plant_num {
    color: rgb(255, 125, 0);
    // font-family: HYQiHei;
    font-size: 9px;
    font-weight: 600;
    position: absolute;
    top: 3px;
    left: 5px;
}

.plant_num_two {
    color: rgb(255, 125, 0);
    // font-family: HYQiHei;
    font-size: 9px;
    font-weight: 600;
    position: absolute;
    top: 3px;
    left: 3px;
}

.color_text {
    color: rgb(140, 161, 192);
}

.square-image {
    width: 100px;
    height: 78px;
    /* 保持纵横比 */
    object-fit: cover;
    /* 保持图片的方形效果 */
}

// 上传图片样式
.avatar-uploader .el-upload {
    border: 1px dashed #409EFF !important;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 100% !important;
    display: flex;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
    height: 100%;
}

::v-deep .el-upload {
    display: flex;
    margin-right: 10px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;

}

::v-deep .el-upload:hover {
    border-color: #409EFF;
    height: 100%;
}

.avatar-uploader-icon {
    font-size: 28px;
    width: 100%;
    color: #8c939d;
    line-height: 178px;
    text-align: center;
}

.avatar {
    display: block;
    height: 178px;
    width: 100%;
}

.uploadImg {
    display: flex;
    padding: 15px 15px;

}

::v-deep .avatar-uploader {
    flex: 1;
}

.uploadImgItem {
    width: 50%;
    height: 200px;
    flex-wrap: wrap;
}

.table_avatar .avatar {
    height: 78px;
}

.table_avatar .avatar-uploader-icon {
    line-height: 78px;
}

::v-deep .demo-image__error {
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 14px;
    background: #F5F7FA;
    color: #C0C4CC;
    vertical-align: middle;
    height: 78px;
}

.set_box_number {
    display: flex;
    align-items: end;
    margin-top: 10px;
}

.container {
    /* width: 700px; */
    /* flex: 1; */
    height: 600px;
}

.info-box {
    width: 400px;
    background-color: #fff;
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 15px;
    border-radius: 10px;
    line-height: 20px;
}

.info-box p {
    margin: 0px;
    color: #999;
}

.info-box span {
    color: #333;
    font-weight: 500;
}

/* 自定义滚动条样式 */
.content-address-list::-webkit-scrollbar {
    width: 4px;
    /* 滚动条宽度 */
}

.content-address-list::-webkit-scrollbar-thumb {
    background-color: #ccc;
    /* 滚动条滑块颜色 */
    border-radius: 4px;
    /* 滚动条滑块圆角 */
}

.content-address-list::-webkit-scrollbar-thumb:hover {
    background-color: #999;
    /* 滚动条滑块悬停颜色 */
}

.content-address-list::-webkit-scrollbar-track {
    background: #f1f1f1;
    /* 滚动条轨道颜色 */
}

//预警样式
.earlyWarning {
    position: absolute;
    z-index: 10;
    width: 100%;
    height: 100%;
    // top: 0;
    // bottom: 0;
    // left: 0;
    // right: 0;
    box-sizing: border-box;
    /* 红 */
    border-top: 2px solid rgb(245, 63, 63);
    border-radius: 8px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    background: rgba(255, 255, 255, 0.8);
}

.warningContent {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.warningContent img {
    width: 86px;
    height: 86px;
}

.warningText {
    margin: 20px 0;
    color: rgb(29, 33, 41);
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: 400;
}

::v-deep .el-dialog {
    margin-top: 3vh !important;
}

::v-deep .el-loading-mask {
    z-index: 999 !important;
}

::v-deep .amap-info-content {
    background-color: #3B8BF3 !important;
    border-radius: 6px;
}

::v-deep .bottom-center .amap-info-sharp {
    border-top: 8px solid #3b8bf3 !important;
}

::v-deep .amap-info-close {
    width: 0px;
    height: 0px;
    overflow: hidden;
}

// 报价列表样式
.quotation {
    display: flex;
    padding: 8px 16px;
    justify-content: space-around;
    align-items: center;
}

.pieceStyle {
    width: 30px;
    display: inline-block;
    white-space: nowrap;
    /* 不换行 */
    overflow: hidden;
    /* 隐藏超出部分 */
    text-overflow: ellipsis;
    /* 使用省略号表示超出部分 */
}




// .custom-dialog {

//     /* 强制穿透 scoped 样式 */
//     ::v-deep .el-dialog__body {
//         background-color: #F2F3F5;
//     }
// }</style>